<template>
  <div class="gl-play-video dib vat" :style="{width, height}">
    <my-player v-if="isPC" class="vam w100 h100 video-inner" ref="video" @play="play" @ready="load" :poster="video.poster || poster" :video-src="video.src || src" @timeupdate="onPlayerTimeUpdate" @pause="onPlayerPause"></my-player>
    <video class="w100 h100 vam video-inner"
           v-else
           :class="{'video-stop': videoStop}"
           :src="video.src || src"
           :poster="video.poster || poster"
           :autoplay="autoplay"
           :loop="loop"
           @play="play"
           @load="load"
           @timeupdate="onPlayerTimeUpdate"
           @pause="onPlayerPause"
           ref="video"
           :muted="muted"
           :controls="controls"
           webkit-playsinline
           x-webkit-airplay
           playsinline
           x5-playsinline></video>
    <img :src="video.poster || poster" v-if="videoStop" class="w100 h100 vam" alt="">
    <div class="controls">
      <div class="play dib vam"></div>

      <span class="time"></span>
      <div class="full-screen dib vam"></div>
    </div>
  </div>
</template>

<script>
  import MyPlayer from './myplayer'
  import {mapGetters} from 'vuex';

  export default {
    name: "GlPlayVideo",
    components: {
      MyPlayer,
    },
    computed: {
      ...mapGetters(['userInfo', 'productInfo']),
    },
    data(){
      return {
        isPC: !/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent),
        total_time:0,
        playback_time:0,
      }
    },
    props: {
      videoStop: {
        type: Boolean,
        default: false,
      },
      controls: {
        type: Boolean,
        default: true,
      },
      muted: {
        type: Boolean,
        default: false,
      },
      loop: {
        type: Boolean,
        default: false,
      },
      autoplay: {
        type: Boolean,
        default: false,
      },
      addPlayRecord: {
        type: Boolean,
        default: true,
      },
      video: {
        type: Object,
        default() {
          return {}
        },
      },
      src: {
        type: String,
        default: ''
      },
      poster: {
        type: String,
        default: ''
      },
      width: {
        type: String,
        default: '100%',
      },
      height: {
        type: String,
        default: '100%',
      },
      cid:{
        type: String | Number,
        default: ''
      }
    },
    watch: {
      videoStop(val) {
        let player = this.$refs.video.player;
        if(!player){
          player = this.$refs.video;
        }
        if (val) {
          player.pause();
        } else {
          player.play();
        }
      }
    },
    methods: {
      load(e) {
        // console.log(e);
        // this.autoplay && e.play();
      },
      play(e) {
        this.addRecord();
        this.addCourseRecord();
        this.$emit('play', e);
      },
      onPlayerPause(){
        if (this.userInfo.uid) {
          this.addPlayback();
          this.addPlayTimes();
        }
      },
      onPlayerTimeUpdate(){
        this.total_time = Math.ceil(this.$refs.video.duration);
        this.playback_time = Math.ceil(this.$refs.video.currentTime);
      },
      addRecord() {
        if (this.addPlayRecord) {
          this.http.$post('api/user/add_resources_record', {
            uid: this.userInfo.uid,
            resource_id: this.video.id,
            type: 1,
            ...this.productInfo,
          }).catch(console.log);
        }
      },
      // 添加课程播放记录
      addCourseRecord() {
        let params = {
          course_id: this.cid,
          ...this.productInfo,
        };
        this.http.$post('api/user/add_course_record', params).then(res => {
          // console.log(res)
        }).catch(console.log);
      },
      // 添加课时播放时长
      addPlayback() {
        let params = {
          uid: this.userInfo.uid,
          resource_id: this.video.id,
          total_time: this.total_time | 0,
          playback_time: this.playback_time | 0
        };
        this.http.$post('api/user/add_playback_length', params).then(res => {
          // console.log(res)
        }).catch(console.log);
      },
      // 添加播放时长记录
      addPlayTimes() {
        let params = {
          uid: this.userInfo.uid,
          resources_id: this.video.id,
          times: this.total_time || 0,  
          ...this.productInfo
        };
        this.http.$post('api/user/add_video_play_times', params).then(res => {
          // console.log(res)
        }).catch(console.log);
      },
    },
    created() {
    },
  }
</script>

<style scoped lang="less">
  .gl-play-video {
    .video-inner {
      object-fit: fill;
    }
    .video-stop {
      display: none;
    }
    /deep/ .vjs_video_573-dimensions.vjs-fluid {
      padding-top: 53.25%;
    }
  }
</style>
